<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入样式-->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/black/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!--jquery-->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <!--easyUI-->
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script src="../easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <!--js-->
    <script>
        $(function () {
            var index =1;
            $("#myTabs").tabs({
                height:500,
                width:500,
                tools:[{
                    iconCls:"icon-add",
                    handler:function () {
                        $("#myTabs").tabs("add",{
                            title:'标题'+index,
                            content:"内容"+index++,
                            closable:true
                        })
                    }
                },{
                    iconCls:"icon-remove",
                    handler:function () {
                        //获取选中的选项卡
                        var tab = $("#myTabs").tabs('getSelected');
                        //.获取选项卡索引
                        var index = $("#myTabs").tabs('getTabIndex',tab);
                        //根据索引删除选项卡
                        $("#myTabs").tabs('close',index);
                    }
                },{
                    iconCls:"icon-emoji1",
                    handler:function () {
                        //获取所有的选项卡n
                        var tabs = $("#myTabs").tabs('tabs');

                        for(var i=tabs.length;i>=0;i-- ){
                            //根据索引删除选项卡
                            $("#myTabs").tabs('close',i);
                        }
                    }
                }],
                selected:0
            });
            /*$("#btn1").click(function () {
                $("#myTabs").tabs("add",{
                    title:'标题'+index,
                    content:"内容"+index++,
                    closable:true
                })
            })*/
        })
    </script>
    <div id="myTabs" class="easyui-tabs">
        <div title="标题1">内容1</div>
        <div title="标题2">内容2</div>
        <div title="标题3">内容3</div>
        <div title="标题4">内容4</div>

    </div>
    <!--<div id="tools" >-->
        <!--<a class="easyui-linkbutton" iconCls="icon-add" id="btn1" ></a>-->
        <!--<a class="easyui-linkbutton" iconCls="icon-emoji1" id="btn2" ></a>-->
    <!--</div>-->

</body>
</html>